<template>
	<view class="classlist">
		<view class="loading" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		<view class="loading" v-if="classList.length || noData" >
			<uni-load-more :status=" noData ? 'noMore' : 'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {ApigetclassList} from '@/api/classlist.js'
import {onLoad, onReachBottom, onUnload} from '@dcloudio/uni-app'
import { setStorage } from '@/utils/storage.js'
import { onShareAppMessage } from '@dcloudio/uni-app'
import {gotoHome} from '@/utils/common.js'
import {ApigetUserList} from '@/api/user.js'

const classList = ref ([])
const noData = ref(false)
const requestList = {
	// classid: uni.id,
	pageNum: 1,
	pageSize: 12
}

let pageNema

onLoad((e) => {
	// queryParams
	const {id=null, name=null, type=null} = e
	// if(!id) {
	// 	gotoHome()
	// 	return
	// }
	if (type) requestList.type = type
	if (id) requestList.classid = id
	pageNema = name
	uni.setNavigationBarTitle({
		title:name
	})
	
	getclassList()
})

// 分页
onReachBottom(()=>{
	if(noData.value) return;
	requestList.pageNum++;
	getClassList();
})

const getclassList = async () => {
	let res
	if (requestList.classid) { res = await ApigetclassList(requestList)}
	if (requestList.type) { res = await ApigetUserList(requestList)}
	
	classList.value = [...classList.value, ...res.data]
	// if(res.total == classList.value.length) noData.value = true
	if(requestList.pageSize > res.data.length) noData.value = true
	console.log(noData.value)
	setStorage('StorClassList', classList.value)
}
// 清除缓存
onUnload(() => {
	uni.removeStorageSync('StorClassList')
})

// 分享页面
onShareAppMessage((e) => {
	return {
		title: '此间壁纸',
		path: '/pages/classlist/classlist?id='+requestList.classid+'&name='+pageNema
	}
})
</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap:5rpx;
		padding:5rpx;
		.item{
			height: 440rpx;
			image{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
}
</style>
